<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>波浪</title>
		<link rel="stylesheet" type="text/css" href="../../../static/css/aui.min.css"/>
		<script type="text/javascript" src="../../../static/js/aui.min.js"></script>
		<style>
			.aui-content-top{width: 100%; height: 200px; font-size: 0; background: var(--aui-jianbian); position: relative;}
			/* Animation */
			.contnet-top-animation{width: 100%; position: absolute; bottom: 0; left: 0}
			.parallax > use {opacity: 0.9;animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;}
			.waves {position:relative; width: 100%; height:15vh; min-height:100px; max-height:150px;}
			.parallax > use:nth-child(1) {animation-delay: -2s;animation-duration: 7s;}
			.parallax > use:nth-child(2) {animation-delay: -3s; animation-duration: 10s;}
			.parallax > use:nth-child(3) {animation-delay: -4s;animation-duration: 13s;}
			.parallax > use:nth-child(4) {animation-delay: -5s; animation-duration: 20s;}
			@keyframes move-forever {
			  0% {transform: translate3d(-90px,0,0);}
			  100% {transform: translate3d(85px,0,0);}
			}
			/*Shrinking for mobile*/
			@media (max-width: 768px) {
			  .waves {height:50px; min-height:40px; }
			  h1 {font-size:24px;}
			}
		</style>
	</head>
	<body>
		<div class="container">
			<header class="aui-header">
				<a class="aui-header-left" onclick="aui.closeWin()"><i class="iconfont iconreturn"></i></a>
				<div class="aui-header-title">波浪</div>
			</header>
			<div class="aui-content">
				<div class="aui-content-top">
					<div class="contnet-top-animation">
						<svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
							<defs>
								<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
							</defs>
							<g class="parallax">
								<use xlink:href="#gentle-wave" x="48" y="1" fill="rgba(255,255,255,1" />
								<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.7)" />
								<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.5)" />
								<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,0.3)" />
							</g>
						</svg>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.addEventListener("load", function(){
			
		});
	</script>
</html>
